<template>
    <div class="head" :class="{'iPhonex': isIphonex}" id="header">
      <template v-if="!isNav">
        <div class="back" @click="handleHomeBack">
          <i class="icon-back"></i>
        </div>
        <!--<a href="http://touch.ihaveu.com/" class="logo"></a>-->
        <span class="title">{{title}}</span>
      </template>
      <template v-else>
        <div v-if="typeof push.currentAddress.meta.hasShowBack == 'undefined'" class="back" @click="handleBack">
          <i class="icon-back"></i>
        </div>
        <span class="title">{{title}}</span>
      </template>
      <!-- eslint-disable -->
      <router-link tag="div"  :to="{path: `/address/joinAddress?fullPathParam=${encodeURIComponent(push.currentAddress.fullPath)}`}" class="push" v-if="push.isShow">
        <i class="icon-push"></i>
      </router-link>
       <!--规则-->
      <router-link tag="div"  :to="{path: '/service/greement'}" class="ruls" v-if = "isHome">
        <i class="icon-ruls"></i><span>规则</span>
      </router-link>
    </div>
</template>


<script>
export default {
  /* eslint-disable */
  name: "Head",
  props: ["isNav", "title", "push"],
  data() {
    return {
      isHome: false,
      // 是否为iPhone X
      isIphonex: false
    };
  },
  mounted() {
//    if (this.$route.path === "/home") {
//      this.isHome = true;
//    }
  this.iphoneType();
  },
  watch: {
    $route(to, from) {
    }
  },
  methods: {    
    // 判断是否为iPhone X
    iphoneType () {
      var u = navigator.userAgent;
      if (!(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1)) {
       if(window.screen.height == 812) {
         this.isIphonex = true;
       }
      }
    },
    // 关闭浏览器
    handleHomeBack() {
      this.$router.back();
    },
    handleBack() {
      if (this.push.isShow) {
        this.$router.replace(this.$route.query.fullPath || "/");
      } else {
        this.$router.back();
      }
    }
  }
};
</script>

<style scoped>
.head {
  /* position: fixed;
  top: 0;
  right: 0;
  left: 0; */
  overflow: hidden;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.6rem;
  text-align: center;
  border-bottom: 1px solid #b7b7b7;
  z-index: 9995;
  background: #fff;
}
.head.iPhonex {
  padding-top: .5rem;
  position: relative;
  z-index: 222;
}
.head .logo {
  position: absolute;
  left: 1.05rem;
  top: 0.45rem;
  margin-left: 0.45rem;
  width: 1.78rem;
  height: 0.6rem;
  background: url("../../assets/img/logo.png") no-repeat center center;
  background-size: 100%;
  text-decoration: none;
}
.head .title {
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.31rem;
  letter-spacing: 0rem;
  color: #000000;
}
.head .back {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  background: url("../../assets/img/back.png") no-repeat center center;
  background-size: 24%;
}
.head.iPhonex .back {
  top: 0.5rem;
}
.head .push {
  position: absolute;
  top: 0;
  right: 0.47rem;
}
.head .push .icon-push {
  display: inline-block;
  width: 0.49rem;
  height: 0.49rem;
  background: url("../../assets/img/push.png") no-repeat;
  background-size: 100%;
}
.icon-ruls{
  display: inline-block;
  width: 0.49rem;
  height: 0.49rem;
  background: url("../../assets/img/wen.png") no-repeat;
  background-size: 100%;
  margin-top: .1rem;
}
.ruls{
  position: absolute;
  top:0;
  color: #DB1163;
  right: 0;
  font-size: .5rem;
}
</style>

